<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GVbhMWrdiCW2ZhyGYaUuGRfa8kPBUKwX"></script>
    <title>之江实验室</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">


    var map = new BMap.Map("allmap");        // 创建Map实例 命名空间为BMAP
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var myIcon = new BMap.Icon("/js/images/camera.png",new BMap.Size(300,157));
    var label = new BMap.Label("摄像头1",{offset:new BMap.Size(20,-10)});
    var label2 = new BMap.Label("摄像头2",{offset:new BMap.Size(20,-10)});
    var label3 = new BMap.Label("摄像头3",{offset:new BMap.Size(20,-10)});


    var point = new BMap.Point(119.972127,30.277076);
    var point2 = new BMap.Point(119.969926,30.277037);
    var point3 = new BMap.Point(119.970789,30.276854);
    map.centerAndZoom(point, 20);

    var marker = new BMap.Marker(point,{icon:myIcon});// 创建标注
    var marker2 = new BMap.Marker(point2,{icon:myIcon});
    var marker3 = new BMap.Marker(point3,{icon:myIcon});


    map.addOverlay(marker);              // 将标注添加到地图中
    map.addOverlay(marker2);
    map.addOverlay(marker3);
    marker.enableDragging();
    marker2.enableDragging();
    marker3.enableDragging();
    marker.setLabel(label);
    marker2.setLabel(label2);
    marker3.setLabel(label3);

    var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    walking.search("中国人工智能小镇", "钱江科创园");
    var myIcon2 = new BMap.Icon("/js/images/person2.png", new BMap.Size(32, 70), {    //小车图片
        //offset: new BMap.Size(0, -5),    //相当于CSS精灵
        imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
    });
    window.run = function (){
        var walking = new BMap.WalkingRoute(map);    //驾车实例
        walking.search("中国人工智能小镇", "钱江科创园");
        walking.setSearchCompleteCallback(function(){
            var pts = walking.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
            var paths = pts.length;    //获得有几个点

            var carMk = new BMap.Marker(pts[0],{icon:myIcon2});
            map.addOverlay(carMk);
            i=0;
            function resetMkPoint(i){
                carMk.setPosition(pts[i]);
                if(i < paths){
                    setTimeout(function(){
                        i++;
                        resetMkPoint(i);
                    },100);
                }
            }
            setTimeout(function(){
                resetMkPoint(5);
            },100)

        });
    }

    setTimeout(function(){
        run();
    },1500);



</script>